<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				display: flex;
			}

			.box {
				width: 300px;
				height: 300px;
				margin-right: 4px;
				border-bottom: 20px solid rgba(0, 0, 127, 0.5);
			}

			.box1 {
				/* 线性渐变 */
				/* liner-gradient(渐变方向,渐变颜色起始点，渐变颜色结束点)*/
				background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
			}

			.box2 {
				/* 径向渐变 */
				/* radial-gradient(shape size at position, color-stop1, color-stop2, ...); */
				background: radial-gradient(circle at 50%, red, yellow, lime)
			}

			.box3 {
				/* 线性渐变 */
				/* conic-gradient(from angle at position, start-color, ..., last-color); */
				background: conic-gradient(at 50%, red, orange, yellow, green, blue, indigo, violet, red)
			}

			.box4 {
				/* 线性渐变 */
				background: repeating-linear-gradient(190deg, #ff6799 0px 10px, #bfa 10px 20px);
			}
		</style>
	</head>
	<body>
		<div class="box1 box"></div>
		<div class="box2 box"></div>
		<div class="box3 box"></div>
		<div class="box4 box"></div>
	</body>
</html>